<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Metorik - Responsive Bootstrap 4 Admin Dashboard Template</title>
    <!-- Favicon -->
    <link rel="shortcut icon" href="../src/images/favicon.ico"/>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../src/css/bootstrap.min.css">
    <!-- Typography CSS -->
    <link rel="stylesheet" href="../src/css/typography.css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="../src/css/style.css">
    <!-- Responsive CSS -->
    <link rel="stylesheet" href="../src/css/responsive.css">
    <!-- Full calendar -->
    <link rel="stylesheet" href="../src/css/main.css">
    <style>
        #top {
            text-align: right;
        }
    </style>
</head>
<body>
<!-- loader Start -->
<div id="loading">

</div>
<!-- loader END -->
<!-- Wrapper Start -->
<div class="wrapper">
    <!-- Sidebar  -->
    <div class="iq-sidebar">
        <div class="iq-sidebar-logo d-flex justify-content-between">
            <a href="index.html">
                <img src="../src/images/logo.gif" class="img-fluid" alt="">
                <span>DaLao</span>
            </a>
            <div class="iq-menu-bt align-self-center">
                <div class="wrapper-menu">
                    <div class="line-menu half start"></div>
                    <div class="line-menu"></div>
                    <div class="line-menu half end"></div>
                </div>
            </div>
        </div>
        <div id="sidebar-scrollbar">
            <div id="menu"></div>
            <div class="p-3"></div>
        </div>
    </div>
    <!-- TOP Nav Bar -->
    <div class="iq-top-navbar">
        <div class="iq-navbar-custom">
            <div class="iq-sidebar-logo">
                <div class="top-logo">
                    <a href="index.html" class="logo">
                        <img src="../src/images/logo.gif" class="img-fluid" alt="">
                        <span>DaLao</span>
                    </a>
                </div>
            </div>
            <div class="navbar-breadcrumb">
                <h5 class="mb-0">日历</h5>
                <nav aria-label="breadcrumb">
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="index.html">首页</a></li>
                        <li class="breadcrumb-item active" aria-current="page">日历</li>
                    </ul>
                </nav>
            </div>
            <div id="navigation"></div>
        </div>
    </div>
    <!-- TOP Nav Bar END -->
    <!-- Page Content  -->
    <div id="content-page" class="content-page">
        <div class="container-fluid">
            <div class="row row-eq-height">
                <div class="col-md-3">
                    <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                            <div class="iq-header-title">
                                <h4 class="card-title ">分类</h4>
                            </div>

                            <div class="iq-card-header-toolbar d-flex align-items-center">
                                <a href="#"><i class="fa fa-plus  mr-0" aria-hidden="true"></i></a>
                            </div>
                        </div>
                        <div class="iq-card-body">
                            <ul class="m-0 p-0 job-classification">
                                <li class=""><i class="ri-check-line bg-danger"></i>会议</li>
                                <li class=""><i class="ri-check-line bg-success"></i>商务旅行</li>
                                <li class=""><i class="ri-check-line bg-warning"></i>个人工作</li>
                                <li class=""><i class="ri-check-line bg-info"></i>团队项目</li>
                            </ul>
                        </div>
                    </div>
                    <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                            <div class="iq-header-title">
                                <h4 class="card-title">今天的日程安排</h4>
                            </div>
                        </div>
                        <div class="iq-card-body">
                            <ul class="m-0 p-0 today-schedule">
                                <li class="d-flex">
                                    <div class="schedule-icon"><i
                                            class="ri-checkbox-blank-circle-fill text-primary"></i></div>
                                    <div class="schedule-text"><span>网页设计</span>
                                        <span>09:00 到 12:00</span></div>
                                </li>
                                <li class="d-flex">
                                    <div class="schedule-icon"><i
                                            class="ri-checkbox-blank-circle-fill text-success"></i></div>
                                    <div class="schedule-text"><span>参与设计</span>
                                        <span>09:00 到 12:00</span></div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-9">
                    <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                            <div class="iq-header-title">
                                <h4 class="card-title">日历</h4>
                            </div>
                            <div class="iq-card-header-toolbar d-flex align-items-center">
                                <a href="#" class="btn btn-primary"><i class="ri-add-line mr-2"></i>预约</a>
                            </div>
                        </div>
                        <div class="iq-card-body">
                            <div id='top'>
                                语言:
                                <select id='locale-selector'></select>
                            </div>
                            <br/>
                            <div id='calendar1'></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Wrapper END -->
<!-- Footer -->
<div id="bottom"></div>
<!-- Footer END -->
</body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="../src/js/jquery.min.js"></script>
<script src="../src/js/popper.min.js"></script>
<script src="../src/js/bootstrap.min.js"></script>
<!-- Appear JavaScript -->
<script src="../src/js/jquery.appear.js"></script>
<!-- Countdown JavaScript -->
<script src="../src/js/countdown.min.js"></script>
<!-- Counterup JavaScript -->
<script src="../src/js/waypoints.min.js"></script>
<script src="../src/js/jquery.counterup.min.js"></script>
<!-- Wow JavaScript -->
<script src="../src/js/wow.min.js"></script>
<!-- Apexcharts JavaScript -->
<script src="../src/js/apexcharts.js"></script>
<!-- Select2 JavaScript -->
<script src="../src/js/select2.min.js"></script>
<!-- Owl Carousel JavaScript -->
<script src="../src/js/owl.carousel.min.js"></script>
<!-- Magnific Popup JavaScript -->
<script src="../src/js/jquery.magnific-popup.min.js"></script>
<!-- Smooth Scrollbar JavaScript -->
<script src="../src/js/smooth-scrollbar.js"></script>
<!-- lottie JavaScript -->
<script src="../src/js/lottie.js"></script>
<!-- Full calendar -->
<script src="../src/js/main.js"></script>
<script src="../src/js/locales-all.js"></script>
<!-- Flatpicker Js -->
<script src="../src/js/flatpickr.js"></script>
<!-- Chart Custom JavaScript -->
<script src="../src/js/chart-custom.js"></script>
<!-- Custom JavaScript -->
<script src="../src/js/custom.js"></script>
<script>
    $(function () {
        $("#menu").load("menus.html");
        $("#navigation").load("navigation-bar.html");
        $("#bottom").load("bottom-bar.html");
    });
    // calender js
    if (jQuery('#calendar').length) {
        document.addEventListener('DOMContentLoaded', function () {
            var calendarEl = document.getElementById('calendar1');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: ['dayGrid']
            });
            calendar.render();
        });
    }
    // calender 1 js
    if (jQuery('#calendar1').length) {
        document.addEventListener('DOMContentLoaded', function () {
            var initialLocaleCode = 'zh-cn';
            var localeSelectorEl = document.getElementById('locale-selector');
            var calendarEl = document.getElementById('calendar1');
            var calendar1 = new FullCalendar.Calendar(calendarEl, {
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
                },
                initialDate: '2020-06-12',
                locale: initialLocaleCode,
                buttonIcons: false, // 显示上一个/下一个文本
                weekNumbers: true,
                navLinks: true, // 可以单击日/周名称来导航视图
                editable: true,
                dayMaxEvents: true, // 当事件太多时允许“更多”链接
                events: [
                    {
                        title: 'All Day Event',
                        start: '2020-06-01'
                    },
                    {
                        title: 'Long Event',
                        start: '2020-06-07',
                        end: '2020-06-10'
                    },
                    {
                        groupId: 999,
                        title: 'Repeating Event',
                        start: '2020-06-09T16:00:00'
                    },
                    {
                        groupId: 999,
                        title: 'Repeating Event',
                        start: '2020-06-16T16:00:00'
                    },
                    {
                        title: 'Conference',
                        start: '2020-06-11',
                        end: '2020-06-13'
                    },
                    {
                        title: 'Meeting',
                        start: '2020-06-12T10:30:00',
                        end: '2020-06-12T12:30:00'
                    },
                    {
                        title: 'Lunch',
                        start: '2020-06-12T12:00:00'
                    },
                    {
                        title: 'Meeting',
                        start: '2020-06-12T14:30:00'
                    },
                    {
                        title: 'Happy Hour',
                        start: '2020-06-12T17:30:00'
                    },
                    {
                        title: 'Dinner',
                        start: '2020-06-12T20:00:00'
                    },
                    {
                        title: 'Birthday Party',
                        start: '2020-06-13T07:00:00'
                    },
                    {
                        title: 'Click for Google',
                        url: 'http://google.com/',
                        start: '2020-06-28'
                    }
                ]
            });
            calendar1.render();

            // 生成区域设置选择器的选项
            calendar1.getAvailableLocaleCodes().forEach(function (localeCode) {
                var optionEl = document.createElement('option');
                optionEl.value = localeCode;
                optionEl.selected = localeCode == initialLocaleCode;
                optionEl.innerText = localeCode;
                localeSelectorEl.appendChild(optionEl);
            });
            // 当选定的选项更改时，动态更改日历选项
            localeSelectorEl.addEventListener('change', function () {
                if (this.value) {
                    calendar1.setOption('locale', this.value);
                }
            });
        });
    }

</script>
</html>
